<template>
  <div class="form bg-white">
    <ProFrom
      ref="lgformRef"
      :initParam="{}"
      :configure="configure"
      :validate="validate"
      :colNum="2"
      :hidden-rule="hiddenFn"
      :show-button="false"
      :isvalidate="true"
      :layout="[4,20]"
    >
      <template #title="item">
        {{ t(item.prop) }}
      </template>

      <template #dept="{searchParam,item}">
        <TreeSelect
          v-model:value="searchParam[item.prop!]"
          :tree-data="treeList"
          allow-clear
          :show-checked-strategy="SHOW_PARENT"
          tree-checkable
          placeholder=""
          :field-names="{
            children: 'children',
            key:'id',
            label:  locale === 'ch' ? 'cname' : 'enname',
            value: 'id'}"
        >
        <template #title="field">
          {{ locale === 'ch' ?  field.cname : field.enname }}
        </template>
        </TreeSelect>
      </template>
    </ProFrom>


    <ProButton class="flex justify-center pb-4" :options="['publish','save','reset']" type="primary" :cancel="cancel" :finished="finished"></ProButton>

  </div>
</template>
<script lang="ts" setup>
import { ref,onMounted } from 'vue';
import {TreeSelect} from "ant-design-vue"
import ProFrom from '@/components/ProForm';
import type { FormProps, FormInstance } from '@/components/ProForm';
import fetchApi from "@/api/user"
import { useI18n } from 'vue-i18n'
const { SHOW_PARENT } = TreeSelect;
const { t,locale } = useI18n({inheritLocale: true,useScope: 'local'})

const lgformRef = ref<FormInstance>();
const treeList = ref<APIUSER.TreeList[]>()



// const {onRequest} = lgForm.useForm({updateApi:()=>Promise.resolve("提交成功"),insertApi:()=>Promise.resolve("更新成功")})

const sexList = [{ label: '男', value: 1, locale: { ch: '男', en: 'man' } },
      { label: '女', value: 2, locale: { ch: '女', en: 'woman' } },
      { label: '中立', value: 3, locale: { ch: '中立', en: 'other' } }]

const configure: FormProps['configure'] = [
  {
    label: '姓名',
    prop: 'name',
    searchInitParam: '章北海',
    searchProps: {},
  },
  {
    label:'性别',
    prop:'sex',
    type:'radio',
    searchInitParam:1,
    enum:sexList
  },
  {
    label:"年龄",
    prop:'age',
    type:'number',
  },
  {
    label:"部门树",
    prop:'dept',
    type:"treeSelect",
    enum:[],
    searchInitParam:[]
  },
  {
    label:"附件",
    prop:"file",
    type:"upload",
  },
  {
    label:"描述",
    prop:"remark",
    type:"textarea",
    searchInitParam:"自然选择号前进4！"
  }
];



const validate: FormProps['validate'] = {
  name: [{
      type: 'string',
      required: true,
      max: 6,
      min: 3,
      message: '请输入3-6个字符的名称',
      trigger: ['change', 'blur'],
    }],
  age:[
    {
      type:'number',
      required:true,
      min:0,
      max:100,
      message:"请输入0-100之间数字",
      trigger:['change','blur']
    }
  ],
  dept:[
    {
      type:"array",
      required:true,
      min:1,
      max:2,
      len:1,
      message:"请选择1项",
      trigger:['change','blur']
    }
  ]
};

const getTreeList = async ()=>{
  const {code,data} = await fetchApi.treeList()
  if(code === 200){
    treeList.value = data
  }
}

const cancel = ()=>{
  console.log("重置");
  lgformRef.value.resetForm()
}

const finished = async (params:any)=>{
  try {
    await lgformRef.value.validate()
    console.log('params',params);
    
    // params 中有id 则执行 update 没有执行insert
    // const res = await onRequest(params)
    // console.log(res,params);
  } catch (error) {
    console.log(error);
  }
}

const hiddenFn = {
  dept: ({ sex }: { sex: number }) => sex !== 3,
}

onMounted(()=>{
  getTreeList()
})

</script>

<i18n>
  {
    "en": {
      "name": "Name",
      "sex": "DeptName",
      "age": "Age",
      "dept": "Dept",
      "file": "File",
      "remark": "Remark",
      "operation":"Operation",
      "view":"View",
      "edit":"Edit",
      "delete":"Delete",

    },
    "ch": {
      "name": "姓名",
      "sex": "性别",
      "age": "年龄",
      "dept": "部门",
      "file": "附件",
      "remark": "备注",
      "operation":"操作",
      "view":"查看",
      "edit":"编辑",
      "delete":"删除",
    }
  }
  </i18n>

<style lang="less" scoped>
:deep(.ProButton){
  .ant-btn{
    margin-left: 10px !important;
  }
}
</style>
